<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="assets/css/login.style.css"/>
</head>
<body>

<!-- 这里是顶部导航条 -->
<header class="am-topbar am-topbar-fixed-top">
    <h1 class="am-topbar-brand">
        <a href="#">Amaze UI</a>
    </h1>

    <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#doc-topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>

    <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">
        <ul class="am-nav am-nav-pills am-topbar-nav">
            <li class="am-active"><a href="#">首页</a></li>
            <li><a href="#">项目</a></li>
            <li class="am-dropdown" data-am-dropdown>
                <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
                    下拉 <span class="am-icon-caret-down"></span>
                </a>
                <ul class="am-dropdown-content">
                    <li class="am-dropdown-header">标题</li>
                    <li><a href="#">1. 去月球</a></li>
                    <li class="am-active"><a href="#">2. 去火星</a></li>
                    <li><a href="#">3. 还是回地球</a></li>
                    <li class="am-disabled"><a href="#">4. 下地狱</a></li>
                    <li class="am-divider"></li>
                    <li><a href="#">5. 桥头一回首</a></li>
                </ul>
            </li>
        </ul>

        <form class="am-topbar-form am-topbar-left am-form-inline" role="search">
            <div class="am-form-group">
                <input type="text" class="am-form-field am-input-sm" placeholder="搜索">
            </div>
        </form>

        <div class="am-topbar-right">
            <button class="am-btn am-btn-primary am-topbar-btn am-btn-sm" id="sign-up">注册</button>
        </div>

        <div class="am-topbar-right">
            <button class="am-btn am-btn-primary am-topbar-btn am-btn-sm" id="sign-in">登录</button>
        </div>

    </div>
</header>

<!-- 这里是注册表单 -->
<div class="center-form-up">
    <span class="am-close am-fr center-form-up-close">&times;</span>
    <form class="center-form-body am-form am-form-horizontal">
        <div class="am-form-group">
            <label for="doc-ipt-3" class="col-sm-2 am-form-label">邮箱</label>
            <div class="col-sm-10">
                <input type="email" id="doc-ipt-3" placeholder="输入你的电子邮件">
            </div>
        </div>

        <div class="am-form-group">
            <label for="doc-ipt-pwd-2" class="col-sm-2 am-form-label">密码</label>
            <div class="col-sm-10">
                <input type="password" id="doc-ipt-pwd-2" placeholder="设置一个密码吧">
            </div>
        </div>

        <div class="am-form-group am-fl">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> 记住十万年
                    </label>
                </div>
            </div>
        </div>

        <div class="am-form-group am-fr">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="am-btn am-btn-default">注册</button>
            </div>
        </div>
    </form>
</div>

<!-- 这里是登录表单 -->
<div class="center-form-in">
    <span class="am-close am-fr center-form-in-close">&times;</span>
    <form method="post" class="am-form center-form-body">
        <label for="email">邮箱:</label>
        <input type="email" name="" id="email" placeholder="输入你的电子邮箱" value="">
        <br>
        <label for="password">密码:</label>
        <input type="password" name="" id="password" placeholder="我已经闭上眼睛了" value="">
        <br>
        <label for="remember-me">
            <input id="remember-me" type="checkbox">
            记住密码
        </label>
        <br />
        <div class="am-cf">
            <input type="submit" name="" value="登 录" class="am-btn am-btn-primary am-btn-sm am-fr">
            <input type="submit" name="" value="忘记密码 ^_^? " class="am-btn am-btn-default am-btn-sm am-fl">
        </div>
    </form>
</div>

<!-- 这里是页面内容 -->
<div class="am-text-center page-head">
    <div class="header-desc">
        <h1>登录、注册页面</h1>
        <p>点击登录按钮或注册按钮，表单从中间弹出。</p>
    </div>
</div>


<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>

<script>
    $(document).ready(function(){
        $("#sign-in").click(function(){
            $(".center-form-in").css({
                'width' : '100%',
                'height' : '100%'
            });
        });
        $(".center-form-in-close").click(function(){
            $(".center-form-in").css({
                'width' : '0',
                'height' : '0'
            });
        });
        $("#sign-up").click(function(){
            $(".center-form-up").css({
                'width' : '100%',
                'height' : '100%'
            });
        });
        $(".center-form-up-close").click(function(){
            $(".center-form-up").css({
                'width' : '0',
                'height' : '0'
            });
        });
    });
</script>

<!--[if lt IE 9]>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->


</body>
</html>